/* eslint-disable max-len */
/* eslint-disable no-tabs */
import classnames from 'classnames';
import { Button, Modal, Tooltip } from 'antd';
import Icon, { createFromIconfontCN } from '@ant-design/icons';
import '../../assets/svg/iconfont';
import '../../assets/svg/menu/iconfont';
import { ButtonProps } from 'antd/lib/button';
import { btnIconList, btnIconButton } from '@/utils/constants';
import { ReactNode } from 'react';
import Keyevent from "@/biz-components/keyevent";

export const IconFont = createFromIconfontCN({});
const UpSvg = () => (
  <svg width="66px" height="44px" viewBox="0 0 66 44">
    <g id="页面-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g id="表单" transform="translate(-1032.000000, -1020.000000)">
        <g id="分组-5-copy" transform="translate(240.000000, 916.000000)">
          <g id="分组-8" transform="translate(727.000000, 104.000000)">
            <g id="添加文件icon" transform="translate(65.000000, 0.000000)">
              <ellipse id="椭圆形" fill="#D5DAFF" cx="33" cy="37.5" rx="33" ry="6.5" />
              <polyline
                id="路径-4"
                stroke="#4A68F0"
                points="10.235602 20.5 32.5478837 10.7644215 55.8242904 20.5"
              />
              <rect
                id="矩形"
                stroke="#4A68F0"
                fill="#FFFFFF"
                x="16.5"
                y="0.5"
                width="33"
                height="31"
              />
              <g
                id="分组-9"
                transform="translate(27.000000, 7.000000)"
                stroke="#4A68F0"
                strokeLinecap="square"
              >
                <path d="M0.5,6 L11.8881107,6" id="直线-5" />
                <path
                  d="M0.5,6 L11.8881107,6"
                  id="直线-5"
                  transform="translate(6.000000, 6.000000) rotate(90.000000) translate(-6.000000, -6.000000) "
                />
              </g>
              <path
                d="M10.5,20.6485009 L10.5,37.5 L55.5,37.5 L55.5,20.6458585 L32.8129721,26.5167342 L10.5,20.6485009 Z"
                id="矩形"
                stroke="#4A68F0"
                fill="#95A5FB"
              />
            </g>
          </g>
        </g>
      </g>
    </g>
  </svg>
);
const CircleSvg = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path d="M512 47.886637C255.677147 47.886637 47.886637 255.677147 47.886637 512S255.677147 976.113363 512 976.113363s464.113363-207.79051 464.113363-464.113363S768.322853 47.886637 512 47.886637zM512 746.102782c-128.160915 0-232.057193-103.895255-232.057193-232.057193s103.895255-232.057193 232.057193-232.057193 232.057193 103.895255 232.057193 232.057193S640.161938 746.102782 512 746.102782z" />
  </svg>
);

const CircleIcon = (props: any) => <Icon component={CircleSvg} {...props} />;
const UpSvgIcon = (props: any) => <Icon component={UpSvg} {...props} />;
interface TableIconProps {
  type?: string; // icon 传入的值,名字请参照文档截图
  text?: ReactNode;
  key?: string;
  onClick?: any;
  disabled?: boolean;
  className?: string;
}
const TableOperate = (props: TableIconProps) => {
  const { type, text, onClick, disabled, className, key } = props;
  const cls = classnames('tb-edit', className, { disabled });
  if (type) {
    return (
      <Tooltip title={text} key={key}>
        <span className={cls} onClick={!disabled ? onClick : () => { }}>
          <IconFont
            type={
              btnIconList[type]
                ? btnIconList[type]
                : type.indexOf('icon-') >= 0
                  ? type
                  : `icon-${type}`
            }
          />
        </span>
      </Tooltip>
    );
  }
  return (
    <span className={cls} onClick={!disabled ? onClick : () => { }}>
      <span className="text">{text}</span>
    </span>
  );
};

const TableOperateAnt = (props: TableIconProps) => {
  const { type, text, onClick, disabled, className } = props;
  const cls = classnames('tb-edit', className, { disabled });
  if (type) {
    return (
      <Tooltip title={text}>
        <span className={cls} onClick={!disabled ? onClick : () => { }}>
          <Icon type={type} />
        </span>
      </Tooltip>
    );
  }
  return (
    <span className={cls} onClick={!disabled ? onClick : () => { }}>
      <span className="text">{text}</span>
    </span>
  );
};

interface ExtBtnProps extends ButtonProps {
  hook?: (val1?: any, val2?: any, val3?: any) => void; // 回调
  name?: string; // 显示名称
  icon: string; // icon类型
  style?: any; //
}

const btnConfirm = (key: any, func: any) => {
  if ('tijiao' === key) {
    return () => {
      Modal.confirm({
        title: '提示',
        content: '是否确认提交?',
        onOk: func,
        okText: '提交',
        cancelText: '取消'
      })
    }
  } else {
    return func;
  }
}

/**
 * 元模型用按钮
 * @param props
 * @constructor
 */
const ExtBtn = (props: ExtBtnProps) => {
  const { name, loading, icon, style, id } = props;
  const hotKeys: any = JSON.parse(localStorage.getItem("HOT_KEYS") || "[]");
  const hotItem: any = hotKeys?.filter((h: any) => h.button === icon).shift();
  const html =
    icon && btnIconButton[icon] ? (
      <Icon type={btnIconButton[icon]} />
    ) : (
      <IconFont
        type={
          btnIconList[icon]
            ? btnIconList[icon]
            : icon && icon.indexOf('icon-') >= 0
              ? icon
              : `icon-${icon}`
        }
      />
    );
  return (
    <Keyevent
      style={{ display: 'inline-block' }}
      events={hotItem ? {
        [`on${hotItem?.key?.replaceAll('+', '')}`]: btnConfirm(icon, props.onClick)
      } : {}}
    >
      <Button id={icon} style={style} type={props.type} onClick={btnConfirm(icon, props.onClick)} loading={loading}>
        {!loading ? html : null}
        {name || ''}
      </Button>
    </Keyevent>
  );
};

export { CircleIcon, TableOperate, ExtBtn, TableOperateAnt, UpSvgIcon };
